import Vue from 'vue'
import VueRouter from "vue-router";
// 一级路由
import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'

// 二级路由
import Article from '@/views/Article'
import Collect from '@/views/Collect'
import Like from '@/views/Like'
import User from '@/views/User'


Vue.use(VueRouter)

// /home/article
// /home/collect
// /home/like
// /home/user
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Layout, // 一级路由的路径
      children: [
        {
          path: '', redirect: 'article'
        },
        {
          // 二级路由path路径 不加 / 
          // 等价于 一级路由的路径 + 二级路由的路径
          // /home/article
          path: 'article', component: Article // 二级路由的路径
        },
        {
          path: 'collect', component: Collect // 二级路由的路径
        },
        {
          path: 'like', component: Like // 二级路由的路径
        },
        {
          path: 'user', component: User // 二级路由的路径
        }
      ]
    },
    { path: '/detail/:id?', component: ArticleDetail },
  ],
  linkActiveClass: 'active'
})

export default router